<template>
  <div
    class="chart-box"
    ref="chartBox"
    v-bind:style="{
      width: typeof width === 'string' ? width : width + 'px',
      height: typeof height === 'string' ? height : height + 'px'
    }"
  >
    <div class="chart-wrapper" ref="chart"></div>
  </div>
</template>

<script>
export default {
  name: 'chartTemp',
  components: {},
  props: {
    option: {
      type: Object,
      default: () => {
        return {}
      }
    },
    width: {
      type: Number | String,
      default: '100%'
    },
    height: {
      type: Number | String,
      default: '100%'
    }
  },
  data() {
    return {
      _myChart: undefined
    }
  },
  created() {},
	mounted() {},
	beforeDestroy() {
		this._myChart && this._myChart.dispose()
	},
  computed: {},
  watch: {
    option: {
      deep: true,
      handler(val, oldVal) {
        if (JSON.stringify(oldVal) == '{}') return
        this._myChart && this._myChart.clear()
        this._myChart?.setOption(this.option)
      }
    }
  },
  methods: {
    init() {
      let tl = new TimelineMax({})
      let chartBox = TweenMax.to(this.$refs.chartBox, 0.3, { opacity: 1 })
      tl.addLabel('start')
        .add(chartBox, 'start+=0')
        .add(this.initChart, 'start+=0')
      return tl
    },
    initChart() {
      if (this._myChart) this._myChart.clear()
      !this._myChart && (this._myChart = this.$echarts.init(this.$refs.chart))
      this._myChart.setOption(this.option)
      this.$emit('getChartInstance', this._myChart)
    }
  }
}
</script>
<style lang="scss" scoped>
.chart-box {
  opacity: 0;
  margin: 0 auto;
  .chart-wrapper {
    width: 100%;
    height: 100%;
  }
}
</style>
